<template>
	<view>
		<block v-if="vote">
			<u-sticky v-if="vote.fans_desc">
				<u-row customStyle="padding:5px 10px;background-color: rgba(255,255,255,.7);">
					<u-col span="2">
						<u-avatar :src="imgUrl + vote.fans_desc.avatar"></u-avatar>
					</u-col>
					<u-col span="7">
						{{vote.fans_desc.name}}
					</u-col>
					<u-col span="3">
						<u-tag text="去关注" icon="level" type="success" shape="circle" v-if="vote.fans_desc.type == 1"
							@click="img_show = true"></u-tag>
						<u-tag text="加好友" icon="weixin-fill" type="success" shape="circle"
							v-else-if="vote.fans_desc.type == 2" @click="img_show = true"></u-tag>
						<u-tag text="加入群" icon="plus-people-fill" type="success" shape="circle"
							v-else-if="vote.fans_desc.type == 3" @click="img_show = true"></u-tag>
						<u-tag text="去体验" icon="weixin-circle-fill" type="success" shape="circle"
							v-else-if="vote.fans_desc.type == 4" @click="wxapp"></u-tag>
					</u-col>
				</u-row>
			</u-sticky>

			<u-overlay :show="img_show" @click="img_show = false">
				<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
					<image :src="imgUrl + vote.fans_desc.qr" v-if="vote.fans_desc && vote.fans_desc.qr" style="width: 80%;" mode="widthFix"></image>
				</view>
			</u-overlay>

			<view class="right-icon">
				<view class="right-icon-view" :style="'background-color: '+color_value"
					@click="goto('/pages/manage/manage?id='+vote_id)" v-if="user.id==vote.user_id">
					<u-icon name="grid-fill" color="#fff" size="28" label="管理" labelPos="bottom" labelColor="#fff"
						labelSize="12" space="0" top="3"></u-icon>
				</view>
				<view class="right-icon-view" :style="'background-color: '+color_value"
					@click="goto('/pages/apply/apply?vote_id='+vote_id)" v-if="vote.apply_status==1">
					<u-icon name="man-add" color="#fff" size="28" label="报名" labelPos="bottom" labelColor="#fff"
						labelSize="12" space="0" top="3"></u-icon>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="right-icon-view" :style="'background-color: '+color_value"
					@click="goto('/pages/share/share?type=vote&id='+vote_id+'&name='+vote.name+'&image='+vote.image)">
					<u-icon name="share-square" color="#fff" size="28" label="分享" labelPos="bottom" labelColor="#fff"
						labelSize="12" space="0" top="3"></u-icon>
				</view>
				<!-- #endif -->
			</view>

			<music :music="vote.music"></music>

			<temp-qqsh :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'qqsh'">
			</temp-qqsh>
			<temp-huajia :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'huajia'">
			</temp-huajia>
			<temp-sheji :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'sheji'">
			</temp-sheji>
			<temp-fengcai :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'fengcai'">
			</temp-fengcai>
			<temp-jiewu :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'jiewu'">
			</temp-jiewu>
			<temp-shufa :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'shufa'">
			</temp-shufa>
			<temp-wang :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'wang'">
			</temp-wang>
			<temp-sheying :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'sheying'">
			</temp-sheying>
			<temp-youxiu :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'youxiu'">
			</temp-youxiu>
			<temp-liuyi :vote="vote" :person="person" v-on:updateData="updateData" v-if="vote.temp_name == 'liuyi'">
			</temp-liuyi>

			<tabbar :vote_id="vote_id" :temp_name="vote.temp_name"></tabbar>
		</block>

		<!-- #ifdef MP-WEIXIN -->
		<adcustom></adcustom>
		<privacy ref="privacy"></privacy>
		<!-- #endif -->
		<u-loading-page :image="system.domain+'/assets/addons/kzvote/img/loading.gif'" bgColor="#36c3e5" color="#36c3e5" iconSize="200"
			:loading="loading" v-if="system"></u-loading-page>
	</view>
</template>

<script>
	import music from '@/components/music/music.vue';
	import tabbar from '@/components/tabbar/vote-tabbar.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				system: 'common/system',
				color: 'common/color',
			})
		},
		components: {
			tabbar,
			music
		},
		data() {
			return {
				color_value: '',
				user: uni.getStorageSync('user'),
				vote_id: 0,
				vote: null,
				page: 1,
				keyword: '',
				has_more: true,
				group_id: -1,
				person: null,
				img_show: false,
				loading: true,
			};
		},
		async onLoad(options) {
			await this.$onLaunched;
			//#ifdef MP-WEIXIN
			let isPrivacySetting = await this.$refs.privacy.getPrivacySetting("showPrivacy")
			if (isPrivacySetting) {
				this.utils.wxapp_login()
			}
			
			let launch = uni.getLaunchOptionsSync();
			var scene = [1001, 1007, 1008, 1011, 1012, 1013, 1014, 1035, 1047, 1048, 1049, 1058, 1067, 1096, 1107]
			if (scene.indexOf(launch.scene) > -1) {
				uni.hideHomeButton()
			}
			//#endif

			if (options.scene) {
				var scene = decodeURIComponent(options.scene);
				this.vote_id = scene;
			} else {
				this.vote_id = options.vote_id;
			}
			
			this.ajax()
			this.persons()
		},
		onReachBottom() {
			if (this.has_more) {
				this.persons()
			}
		},
		onPullDownRefresh: function() {
			this.ajax();
			uni.stopPullDownRefresh()
		},
		methods: {
			ajax() {
				this.http('vote/detail', {
					vote_id: this.vote_id
				}, 'get').then(res => {
					this.vote = res.data;
					if (this.vote.shield_status == 1){
						//屏蔽流量主
						this.$store.state.common.ad = null
					}else{
						// #ifdef MP-WEIXIN
						this.adUtils.cp.load('vote_index_cp')
						// #endif
					}
					this.vote.down_time = this.vote.end_time * 1000 - Number(new Date());
					uni.setNavigationBarTitle({
						title: res.data.name
					});
					this.loading = false
					if (this.vote.temp_name == 'qqsh') {
						this.color_value = '#9c4e1d'
					} else if (this.vote.temp_name == 'huajia') {
						this.color_value = '#00BFFF'
					} else if (this.vote.temp_name == 'sheji') {
						this.color_value = '#fa3612'
					} else if (this.vote.temp_name == 'fengcai') {
						this.color_value = '#AB1600'
					} else if (this.vote.temp_name == 'jiewu') {
						this.color_value = '#F842BD'
					} else if (this.vote.temp_name == 'shufa') {
						this.color_value = '#000000'
					} else if (this.vote.temp_name == 'wang') {
						this.color_value = '#31CDCA'
					} else if (this.vote.temp_name == 'sheying') {
						this.color_value = '#262621'
					} else if (this.vote.temp_name == 'youxiu') {
						this.color_value = '#41d1fb'
					} else if (this.vote.temp_name == 'liuyi') {
						this.color_value = '#7ef903'
					}

					// #ifdef MP-WEIXIN
					uni.$u.mpShare = {
						title: this.vote.name,
						path: '/pages/vote/index?vote_id=' + this.vote.id,
						imageUrl: this.imgUrl + this.vote.image,
					}
					// #endif
					this.utils.share({
						title: this.vote.name,
						imgUrl: this.imgUrl + this.vote.image,
					})
				});
			},
			persons() {
				var data = {};
				data.vote_id = this.vote_id;
				data.page = this.page;
				data.keyword = this.keyword;
				if (this.group_id > -1) {
					data.group_id = this.group_id;
				}
				this.http('person/index', data, 'get').then(res => {
					var data = res.data.data;
					this.person = this.person || [];
					this.person = this.person.concat(data);
					this.has_more = res.data.has_more;
					this.page++;
				});
			},
			updateData(e) {
				this.group_id = e.group_id || '';
				this.keyword = e.keyword || '';
				this.person = null;
				this.page = 1;
				this.has_more = false;
				this.persons()
			},
			wxapp() {
				uni.navigateToMiniProgram({
					appId: this.vote.fans_desc.appid,
					path: this.vote.fans_desc.path,
				});
			},
			goto(url) {
				this.utils.goto(url)
			}
		}
	};
</script>

<style lang="scss">
	.right-icon {
		width: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: fixed;
		bottom: 80px;
		right: 15px;
		z-index: 99;

		.right-icon-view {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-bottom: 15px;
		}
	}
</style>
